<template>
  <div>
    <h2 @click="changeData">修改name</h2>
  </div>
</template>

<script>
import { ref, reactive, watch } from "vue";
export default {
  setup() {
    //1.定义可响应式对象
    const info = reactive({ name: "pengfan", age: 18 });
    const name = ref("shanghai");

    // 2.侦听器watch
    watch(
      [() => ({ ...info }), name],
      ([newInfo, newName], [oldInfo, oldName]) => {
        console.log(newInfo, newName, oldInfo, oldName);
      }
    );

    const changeData = () => {
      info.name = "why";
      name.value = "chengdu";
    };
    return {
      info,
      changeData,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>